Flexbox Layout এবং Positioning

Flexbox (Flexible Box Layout) হল একটি CSS3 Layout মডেল যা আপনাকে একটি কন্টেইনারের ভিতরে উপাদানগুলির অবস্থান এবং সাইজ সহজে নিয়ন্ত্রণ করতে সাহায্য করে। এটি মূলত একটি মাত্র এক্স-অক্ষ বা ওয়াই-অক্ষ (horizontal or vertical) ফ্লেক্সেবল লেআউট তৈরি করতে ব্যবহৃত হয়। Flexbox এর মাধ্যমে উপাদানগুলির মধ্যে space distribution, alignment, এবং flexibility খুব সহজভাবে নিয়ন্ত্রণ করা যায়, যা সাধারণত পরম পরিমাণ সাইজ দেওয়া বা float এবং positioning মডেলগুলো ব্যবহার করতে গিয়ে সমস্যায় পড়ে।

Flexbox Layout এর মূল ধারণা

Flexbox ব্যবহারের জন্য মূলত একটি flex container এবং তার মধ্যে থাকা উপাদানগুলোকে flex items বলা হয়। Flexbox কন্টেইনারটি যেভাবে উপাদানগুলোকে অ্যালাইন বা সাজাবে তা নির্ভর করবে কন্টেইনারের কিছু CSS প্রপার্টি এবং তার ভেতরের উপাদানগুলোর জন্য দেয়া স্টাইলগুলোর ওপর।

Flexbox কন্টেইনারের CSS প্রপার্টি

• display: flex: এটি কন্টেইনারকে flexbox কন্টেইনারে পরিণত করে এবং উপাদানগুলোকে flex items হিসেবে আচরণ করতে বলে।
• flex-direction: এটি flex items গুলোর অক্ষ (row বা column) নির্ধারণ করে।
  • row: ডিফল্ট মান, উপাদানগুলো অনুভূমিকভাবে সাজানো হয়।
  • column: উপাদানগুলো উল্লম্বভাবে সাজানো হয়।
  • row-reverse: উপাদানগুলো উল্টো অনুভূমিকভাবে সাজানো হয়।
  • column-reverse: উপাদানগুলো উল্টো উল্লম্বভাবে সাজানো হয়।

উদাহরণ

.container {
  display: flex;
  flex-direction: row; /* উপাদানগুলো অনুভূমিকভাবে সাজাবে */
}

• justify-content: এটি flex items গুলোর মধ্যে horizontal alignment নিয়ন্ত্রণ করে। এর মানগুলো হলো:
  • flex-start: উপাদানগুলো কন্টেইনারের শুরুতে সারিবদ্ধ হবে।
  • flex-end: উপাদানগুলো কন্টেইনারের শেষে সারিবদ্ধ হবে।
  • center: উপাদানগুলো কন্টেইনারের মাঝখানে কেন্দ্রীভূত হবে।
  • space-between: উপাদানগুলোর মধ্যে সমান ফাঁকা জায়গা থাকবে, প্রথম এবং শেষ উপাদানের মধ্যে কোনো স্পেস থাকবে না।
  • space-around: উপাদানগুলোর মধ্যে সমান ফাঁকা জায়গা থাকবে, এবং প্রথম ও শেষ উপাদানের চারপাশেও সমান ফাঁকা থাকবে।
  • space-evenly: সব উপাদানের মধ্যে সমান ফাঁকা থাকবে, যার মধ্যে প্রথম এবং শেষ উপাদানের মধ্যে ও সমান ফাঁকা থাকবে।

উদাহরণ

.container {
  display: flex;
  justify-content: center; /* উপাদানগুলো কন্টেইনারের মাঝখানে থাকবে */
}

• align-items: এটি flex items গুলোর vertical alignment নিয়ন্ত্রণ করে (cross-axis), অর্থাৎ এক্স-অক্ষের বিপরীত অক্ষ (যেমন vertical alignment)।
  • flex-start: উপাদানগুলো কন্টেইনারের শীর্ষে সাজানো হবে।
  • flex-end: উপাদানগুলো কন্টেইনারের নিচে সাজানো হবে।
  • center: উপাদানগুলো কন্টেইনারের মাঝখানে সাজানো হবে।
  • baseline: উপাদানগুলোর বেসলাইন একসাথে সাজানো হবে।
  • stretch: উপাদানগুলো পুরো কন্টেইনারের উচ্চতায় প্রসারিত হবে।

উদাহরণ

.container {
  display: flex;
  align-items: center; /* উপাদানগুলো কন্টেইনারের মাঝখানে উল্লম্বভাবে সাজাবে */
}

• flex-wrap: এটি নির্ধারণ করে যে, flex items গুলো এক লাইনে থাকবে, নাকি একাধিক লাইনে বিভক্ত হবে যদি কন্টেইনারের সাইজ ছোট হয়ে যায়।
  • nowrap: সব উপাদান এক লাইনে থাকবে।
  • wrap: উপাদানগুলো একাধিক লাইনে বিভক্ত হবে।
  • wrap-reverse: উপাদানগুলো উল্টোভাবে একাধিক লাইনে বিভক্ত হবে।

উদাহরণ

.container {
  display: flex;
  flex-wrap: wrap; /* উপাদানগুলো একাধিক লাইনে বিভক্ত হবে */
}

Positioning in CSS

CSS-এর positioning উপাদানের অবস্থান নিয়ন্ত্রণ করতে ব্যবহৃত হয়। এটি নির্ধারণ করে যে, একটি উপাদান কিভাবে অন্যান্য উপাদানের সাথে সম্পর্কিত থাকবে।

position প্রপার্টির মান

• static (ডিফল্ট): উপাদানগুলো সাধারণ প্রবাহ অনুসারে পজিশন পায়, কোন বিশেষ পজিশনিং প্রপার্টি কাজ করে না।
• relative: উপাদানটি তার সাধারণ পজিশন থেকে স্থানান্তরিত হতে পারে, তবে এটি এখনও অন্যান্য উপাদানের জায়গা দখল করবে।
• absolute: উপাদানটি তার নিকটস্থ পজিশনড কন্টেইনারের মধ্যে পজিশন হবে (যেমন relative, absolute, বা fixed পজিশন সহ প্যারেন্ট কন্টেইনার)।
• fixed: উপাদানটি ব্রাউজারের ভিউপোর্টে স্থিরভাবে পজিশন হবে, স্ক্রোল করলে এটি চলবে না।
• sticky: এটি relative এবং fixed পজিশনিংয়ের মিশ্রণ। যখন একটি নির্দিষ্ট পজিশনে স্ক্রোল করা হয়, তখন এটি fixed হয়ে যায়, অন্যথায় এটি relative থাকে।

উদাহরণ

.container {
  position: relative;
}

.child {
  position: absolute;
  top: 10px;
  left: 20px;
}

এখানে, .child উপাদানটি .container এর ভিতরে ১০ পিক্সেল উপরের এবং ২০ পিক্সেল বাম দিক থেকে পজিশন হবে।

Flexbox এবং Positioning এর তুলনা

সারাংশ

Flexbox হল একটি শক্তিশালী লেআউট মডেল যা আপনাকে উপাদানগুলিকে সহজে সাজাতে এবং তাদের সাইজ ও স্পেস কন্ট্রোল করতে সাহায্য করে। এটি সাধারণত একাধিক উপাদানকে এক্স-অক্ষ বা ওয়াই-অক্ষের মধ্যে সাজানোর জন্য ব্যবহৃত হয়। অপরদিকে, positioning পদ্ধতি একে অপরের উপর নির্ভরশীল উপাদানগুলির অবস্থান নিয়ন্ত্রণ করতে ব্যবহৃত হয়, যেখানে আপনি নির্দিষ্টভাবে উপাদানগুলির অবস্থান ঠিক করতে পারেন। Flexbox এবং positioning দুইটি একে অপরকে পরিপূরকভাবে কাজ করে, যা লেআউট ডিজাইন করার সময় একাধিক স্তরের ফ্লেক্সিবিলিটি প্রদান করে।